<template>
	<!-- 手工出库 -->
	<view>
		<view class="card-wrapper">
			<!-- 主表 -->
			<view class="radius shadow shadow-lg bg-white padding-sm light bg-blue">
				
				<view class="flex flex-wrap margin-top">
					<view class="basis-xs">
						集团:
					</view>
					<view class="basis-xl text-black solid-bottom position-r" :class="activeLineIndex == 1 ? 'solid-bottom-blue' :'' " @tap="activeIndexM(1,'GROUP')">
						<input class="wc-input" type="text" disabled  :value="mainOrder.GROUPNAME" placeholder="请选择"/>
						<view class="basis-xs text-right position-a down-arrow-btn " >
							<text class="cuIcon-triangledownfill text-xxl text-bold" :class="activeLineIndex == 1 ? 'text-blue' :'' "></text>
						</view>
					</view>
				</view>
				<view class="flex flex-wrap margin-top">
					<view class="basis-xs">
						组织:
					</view>
					<view class="basis-xl text-black solid-bottom position-r" :class="activeLineIndex == 2 ? 'solid-bottom-blue' :'' " @tap="activeIndexM(2,'BA_ORGANIZE')">
						<!-- {{ mainOrder.ORGNAME || '' }} -->
						<input class="wc-input "   name="STORENAME" type="text" disabled :value="mainOrder.ORGNAME" placeholder="请选择"/>
						<view class="basis-xs text-right position-a down-arrow-btn " >
							<text class="cuIcon-triangledownfill text-xxl text-bold" :class="activeLineIndex == 2 ? 'text-blue' :'' "></text>
						</view>
					</view>
				</view>
				<view class="flex flex-wrap margin-top">
					<view class="basis-xs">
						部门:
					</view>
					<view class="basis-xl text-black solid-bottom position-r" :class="activeLineIndex == 3 ? 'solid-bottom-blue' :'' " @tap="activeIndexM(3,'BA_DEPARTMENT')">
						<!-- {{ mainOrder.DEPTNAME || '' }} -->
						<input class="wc-input " disabled name="STORENAME" type="text"  :value="mainOrder.DEPTNAME" placeholder="请选择"/>
						<view class="basis-xs text-right position-a down-arrow-btn " >
							<text class="cuIcon-triangledownfill text-xxl text-bold" :class="activeLineIndex == 3 ? 'text-blue' :'' "></text>
						</view>
					</view>
				</view>
				
				

				<view class="flex flex-wrap margin-top">
					<view class="basis-xs">
						申请人:
					</view>
					<view class="basis-xl text-black solid-bottom position-r" :class="activeLineIndex == 5 ? 'solid-bottom-blue' :'' " @tap="activeIndexM(5,'BA_USER')">
						<!-- {{ mainOrder.SUPPLYNAME || '' }} -->
						<input class="wc-input width60" disabled=""  name="STORENAME" type="text"  :value="mainOrder.APPLYER" placeholder="请选择"/>
						<view class="basis-xs text-right position-a down-arrow-btn " >
							<text class="cuIcon-triangledownfill text-xxl text-bold" :class="activeLineIndex == 5 ? 'text-blue' :'' "></text>
						</view>
					</view>
					
					<!-- <view class="basis-xl text-black">
						{{ mainOrder.APPLYER || '' }}
					</view> -->
				</view>
				
				<view class="flex flex-wrap margin-top">
					<view class="basis-xs">
						仓库<span class="text-red">*</span>
					</view>
					<view class="basis-xl text-black position-r solid-bottom" :class="isActiveStore? 'solid-bottom-blue' :'' ">
						<input class="wc-input" style="width: 60%;" name="STORENAME" type="text"  :value="mainOrder.STORENAME" placeholder="请选择" @tap="activeIndexM(6,'BD_STORE')"/>
						
						<view class="basis-xs text-right position-a scan-btn " @tap="openScan('msid')">
							<text class="cuIcon-scan text-xxl text-bold"></text>
						</view>
					</view>
				</view>
				
				<view class="flex flex-wrap margin-top ">
					<view class="basis-xs">
						备注:
					</view>
					<view class="basis-xl text-black solid-bottom" :class="isActiveNote? 'solid-bottom-blue' :'' ">
						<input @focus="activeNote" @blur="getNote" class="wc-input " type="text" value="" placeholder="请输入"/>
					</view>
				</view>
			</view>
			<!-- 物资子表 -->
			
			<view class="radius shadow shadow-lg bg-white padding-sm margin-top sub-table" v-for="(item,index) in planList" :key="index">
				<view class="flex flex-wrap">
					<view class="basis-xs">
						物资单号
					</view>
					<view class="basis-xl text-black">
						{{ item.PK_MATERIAL }}
					</view>
				</view>
				<view class="flex flex-wrap margin-top">
					<view class="basis-xs">
						物资名称
					</view>
					<view class="basis-xl text-black">
						{{ item.MATERIALNAME }}/{{ item.MATSPEC  || '' }}
					</view>
				</view>
								
				<view class="flex flex-wrap margin-top line-height-30 ">
					<view class="basis-xs ">
						申请数量<span class="text-red">*</span>
					</view>
					<view class="basis-xl solid-bottom  sub-table-input" >
						<input class="wc-input" v-model="item.NNUM" type="text" value="item.NNUM" placeholder="请输入申请数量"/>
					</view>
				</view>
				<view class="flex flex-wrap margin-top">
					<view class="basis-xs">
						库存总量
					</view>
					<view class="basis-xl text-black">
						{{ item.TOTALNUM  || '' }}({{ item.UNIT  || '' }})
					</view>
				</view>
				<view class="flex flex-wrap margin-top " >
					<view class="basis-xs ">
						仓库<span class="text-red">*</span>
					</view>
					<view class="basis-xl text-black position-r solid-bottom" :class="isActiveStore? 'solid-bottom-blue' :'' ">
						<input class="wc-input" style="width: 60%;" name="STORENAME" type="text"  :value="item.STORENAME" placeholder="请选择" @tap="activeIndexM(index,'BD_STORE',true)"/>
						
						<view class="basis-xs text-right position-a scan-btn " @tap="openScan('STORE',index)">
							<text class="cuIcon-scan text-xxl text-bold"></text>
						</view>
					</view>
				</view>
				
				<view class="flex flex-wrap margin-top ">
					<view class="basis-xs">
						货位<span class="text-red">*</span>
					</view>
					<view class="basis-xl text-black position-r solid-bottom" :class="isActiveStore? 'solid-bottom-blue' :'' ">
						<input class="wc-input" style="width: 60%;" name="STATIONNAME" type="text"  :value="item.STATIONNAME" placeholder="请选择" @tap="activeIndexM(index,'BD_RACK',true)"/>
						<!-- {{ item.STORENAME }} -->
						<view class="basis-xs text-right position-a scan-btn " @tap="openScan('STATION',index)">
							<text class="cuIcon-scan text-xxl text-bold"></text>
						</view>
					</view>
				</view>
				
				<view class="flex flex-wrap margin-top ">
					<view class="basis-xs">
						生产日期
					</view>
					<view class="basis-xl text-black solid-bottom" @click="dateEvent('FACTORYDATE',index)">
						{{ item.FACTORYDATE }} 
					</view>
				</view>
				
				<view class="flex flex-wrap margin-top ">
					<view class="basis-xs">
						保质期
					</view>
					<view class="basis-xl text-black solid-bottom">
						<!-- {{ item.EXPDATE }} -->
						<input class="wc-input" v-model="item.EXPDATE" type="text" value="item.EXPDATE" placeholder="请输入到货量"/>
					</view>
				</view>
				
				<view class="flex flex-wrap margin-top">
					<view class="basis-xs">
						入库日期
					</view>
					<view class="basis-xl text-black" @click="dateEvent('INSTOCKDATE',index)">
						{{  item.INSTOCKDATE }}
					</view>
				</view>
				<view class="flex flex-wrap margin-top">
					<view class="basis-xs">
						图片上传
					</view>
					<view class="basis-xl text-black solid-bottom">
						{{ item.INPHOTO }} 
					</view>
				</view>
			</view>
			
			
			<view class="">
				<button class="cu-btn block bg-blue margin-tb-sm lg" @click="submit">
					<!-- <text class="cuIcon-loading2 cuIconfont-spin"></text> --> 
					提交
				</button>
			</view>

		</view>
		<view class="add-btn-wrap position-f" @click="addItem">
			<button class="cu-btn cuIcon bg-green lg shadow-blur">
				<text class="cuIcon-add text-bold"></text>
			</button>
		</view>
		<w-picker
			mode="dateTime" 
			startYear="2000" 
			endYear="2050"
			step="1"
			:defaultVal="[1,1,1,1,2,5]" 
			:current="true" 
			@confirm="onConfirm" 
			ref="dateTime" 
			themeColor="#f00"
		></w-picker>
		
	</view>
	
	
	
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import wPicker from "@/components/w-picker/w-picker.vue";
	import api from '@/common/api.js';
	import utils from '@/common/util.js';
	// var graceChecker = require("../../common/graceChecker.js");
	let query = {
			"category":"ST_INAPPLY",
			"page":1,
			"rows":"50",
			"sidx":"",
			"sord":"",
			"queryJson":{},
			"userId":"",
			"account":"admin"
	}
	let _self, dateTimekey, activeIndex, VMEMO,BILLFROM,activeType ; 
	export default{
		computed: mapState(['userInfo','baseUrl']),
		data(){
			return{
				mainOrder:{
					"PK_GROUP": "",
					"GROUPNAME": "",
					"PK_ORG": "",
					"ORGNAME": "",
					"PK_DEPT": "",
					"DEPTNAME": "",
					"PK_APPLYER": "",
					"APPLYER": "",
					"PK_SUPPLY": "",
					"SUPPLYNAME": "",
					"PK_STORE": "",
					"STORENAME": "",
					"BILLFROM": 0,
					"VMEMO": "" ,
					"BTYPE": 3 ,
					"userId": "",
					"account": ""					
				},
				planList: [],
				isActiveNote:false,
				isActiveStore:false,
				activeSub:false, // 是否点击的物资列表的仓库，货位等选择控件
				mid:'',
				today:utils.getToDay(),
				dateTimekey:'',
				// activeIndex:'',
				activeLineIndex: 0,
				label01: '单号' // 主表的第一个label BD_MATERIAL
			}
		},
		components: {
			wPicker
		},
		onLoad(p) {
			// console.log(p);
			_self = this 
			query.userId = _self.userInfo.UserId
			query.account = _self.userInfo.Account
			_self.mainOrder.userId = _self.userInfo.UserId
			_self.mainOrder.account = _self.userInfo.Account
			// query.category = p.dbt;
			let abc = JSON.parse(decodeURIComponent(p.data));
			abc.map((item)=>{
				item.FACTORYDATE = '';
				item.EXPDATE = '180';
				item.INSTOCKDATE = utils.getToDay();
				item.STORENAME = '';
				item.PK_STORE = '';
				item.STATIONNAME = '';
				item.PK_STATION = '';
				item.INPHOTO = '';
				return item;
			})
			_self.planList = abc
			// query.queryJson.PK_INAPPLY = p.id
		},
		onShow() {
			uni.$on('getSelectItem',function(data){
				// console.log(data);
				switch (activeType){
					case 'GROUP':
						_self.mainOrder.GROUPNAME = data.FullName
						_self.mainOrder.PK_GROUP = data.OrganizeId
						break;
					case 'BA_ORGANIZE':
						_self.mainOrder.ORGNAME = data.FullName
						_self.mainOrder.PK_ORG = data.OrganizeId
						break;
					case 'BA_DEPARTMENT':
						_self.mainOrder.DEPTNAME = data.FullName
						_self.mainOrder.PK_DEPT = data.OrganizeId
						break;
					case 'BD_SUPPLIER':
						_self.mainOrder.SUPPLYNAME = data.VNAME
						_self.mainOrder.PK_SUPPLY = data.BILLNO
						break;
					case 'BA_USER':
						_self.mainOrder.APPLYER = data.RealName
						_self.mainOrder.PK_APPLYER = data.UserId
						break;	
					case 'BD_STORE': // 仓库
						if(_self.activeSub){
							_self.planList[_self.activeLineIndex].PK_STORE = data.BILLNO
							_self.planList[_self.activeLineIndex].STORENAME = data.VNAME
						}else{
							_self.mainOrder.PK_STORE = data.BILLNO
							_self.mainOrder.STORENAME = data.VNAME
						}
						break;
					case 'BD_RACK': // 货位
						if(_self.activeSub){
							_self.planList[_self.activeLineIndex].STATIONNAME = data.VNAME
							_self.planList[_self.activeLineIndex].PK_STATION = data.BILLNO
						}
						break;
						
					default:
						break;
				}
			})	
		},
		onUnload(){
			uni.$off('getSelectItem',function(data){})
		},
		methods:{
			getNote(e){
				// console.log(e)
				VMEMO = e.target.value ;
			},
			onConfirm(val){
				this.planList[activeIndex][dateTimekey] = val.result ;
			},
			dateEvent(id,index){
				dateTimekey = id ;
				activeIndex = index ;
				this.$refs.dateTime.show();
			},
			activeIndexM(i,t,activeSub){
				_self.activeLineIndex = i ; 
				activeType = t ;
				_self.activeSub = activeSub ;
				uni.navigateTo({
					url:'/pages/public/search?t='+t
				})
				
			},
			activeNote(){
				_self.isActiveNote = true 
			},
			addItem(){
				uni.navigateBack({})
			},
			openScan(id,index){
				uni.scanCode({
						onlyFromCamera: true,
						success: function (res) {
								// console.log(res)
								if(res.scanType != 'QR_CODE'){
									return uni.showToast({
										icon:'none',
										title:'类型错误，请重新扫描' 
									})
								}
								let t = res.result.replace(/'/g,'"');
								let data = JSON.parse('{'+t+'}') ;
								let sid = 'PK_'+ id,sname = id+'NAME';
								if(id == 'msid'){
									_self.mainOrder.PK_STORE = data.PK_STORE ;
									_self.mainOrder.STORENAME = data.STORENAME ;
								}else if(id == 'STORE'){
									_self.planList[index][sname] = data.STORENAME
									_self.planList[index][sid] = data.PK_STORE
								}else if(id == 'STATION'){
									_self.planList[index][sname] = data.STATIONNAME
									_self.planList[index][sid] = data.PK_STATION
								}
								
						}
				});
				
			},
			
			submit(){
				let data = { 
					..._self.mainOrder,
					"Detail": _self.planList
				}
				let checkResult = false,error='';
				_self.planList.forEach((item,index)=>{
					if(!item.PK_STORE){
						return error = `第${index+1}个物资单仓库不能为空`
					}else if(!item.PK_STATION){
						return error =  `第${index+1}个物资单货位不能为空`
					}else if(!item.NNUM){
						return error =  `第${index+1}个物资单入库数量不能为空`
					}
					checkResult = true;
				})
				let URL = api.apiPublic.dOutboundSubmit
				this.axios({
					url: URL ,
					data: data ,
					isLoading: 1
				}).then(res=>{
					let { Result } = res ;
					this.$utils.tips('提交成功')
					utils.delayBack();
				})
			}	
		}
	}
</script>

<style scoped>
	.card-wrapper{
		padding: 26upx;
	}
	.line-height-30{
		line-height: 24px!important;
	}
	
	.sub-table-input{
		margin-top: 10upx;
	}
	.width60{
		width: 60%;
	}
	.down-arrow-btn{
		top: -20upx;
		right: 0upx;
		font-size: 40upx;
		padding: 10upx;
	}
	.add-btn-wrap{
		position: fixed;
		bottom: 100upx;
		right: 50upx;
	}
	.add-btn-wrap .cuIcon-add{
		font-size: 50upx;
	}
</style>
